var arr = [];//申明商品列表变量

var cartArr = []; //购物车变量

window.onload = function() {
	
	showGoodsList(getLocalGoodsListData());
	
	render(getLocalCartData());
}



function showGoodsList(arr) {
	
	var list_ul = document.querySelector(".list_ul");
	list_ul.innerHTML = "";
	
	
	for(var i = 0;i <arr.length;i++) {
		list_ul.innerHTML +=`
		<li data-id = "${ arr[i].goodsid}">
		<img src = "${ arr[i].image}">
		<div class="good_title mt5">
		${ arr[i].name }
		</div>
		<div class="price mt5">
			${ arr[i].price }元
		</div>
		<button type ="button" id="btn_add mt5" onclick = 'addCart("${ arr[i].goodsid}","${ arr[i].image }","${arr[i].name }","${ arr[i].price }");'>
		加入购物车
		</button>
		
		</li>
		`
		
	}
}

	 



function addCart(goodsId,img,goodsName,price) {
	var count = 1;
	
	var xiaoji = price / 1 * count;
	 var obj = {
	 	id: goodsId,
	 	src: img,
	 	title: goodsName,
	 	price: price,
	 	count: count,
	 	xiaoji: xiaoji.toFixed(2),
	 	time: new Date().toLocaleTimeString()
	 }
	 addData(obj);
}


function addData(obj) {
	cartArr = getLocalCartData();
	var result = cartArr.some(function(item,index){
		return item.id === obj.id
	})
	if(result){
		jia(obj.id);
		return;
	}
	cartArr.push(obj);
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);

}






function render(carArr) {
	var tbody = document.querySelector("tbody");
	tbody.innerHTML = "";
	var str = "";
	var sum = 0;
	for (var i = 0;i< cartArr.length;i++) {
		str += ` 
		<tr>
			<td>
			    <input type="checkbox"  name=""  class="danxuan" data-id="${ cartArr[i].id }"/>
			</td>
			<td>
			    <p>
					<img src="${ cartArr[i].src }" >
						<br>
					<span>${ cartArr[i].title }</span>
				</p>
			</td>
			<td>
				<button type="button" class="btn" onclick="jian(${ cartArr[i].id })">-</button>
				<input disabled type="number" name="" id="" value="${ cartArr[i].count }" class="count"/>
				<button type="button" class="btn" onclick="jia(${ cartArr[i].id })">+</button>
			</td>
			<td>
				<span>${ cartArr[i].price }元</span>
			</td>
			<td>
				${ cartArr[i].xiaoji }
			</td>
			<td>
				<button type="button" onclick="del(${ cartArr[i].id })">删除</button>
			</td>
			<td>
				${ cartArr[i].time }
			</td>
		</tr>
		`
		sum = sum / 1 + carArr[i].xiaoji / 1
	}
	tbody.innerHTML = str;
	document.getElementById("sum").innerHTML = sum;
}



function getLocalCartData() {
	cartArr = localStorage.cartArr ? JSON.parse(localStorage.cartArr) : [];
	return cartArr;
}


function getLocalGoodsListData() {
	arr = localStorage.dataObj ? JSON.parse(localStorage.dataObj) : [];
	return arr;
}



function jian(id) {
	carArr = getLocalCartData();
	carArr.forEach(function (item,index) {
		if (item.id == id) {
			if (item.count>1){
				item.count--;
				item.xiaoji= (item.count*item.price).toFixed(2);
			}
		}
	})
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);
}




function jia(id) {
	cartArr = getLocalCartData();
	cartArr.forEach(function (item,index){
		if(item.id == id) {
			item.count++;
			item.xiaoji = (item.count * item.price).toFixed(2);
		}
	})
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);
}



function del(id) {
	cartArr = getLocalCartData();
	cartArr = cartArr.filter(function (item,index) {
		return item.id != id
	})
	localStorage.cartArr = JSON.stringify(cartArr);
	render(getLocalCartData());
}






var quanxuan = document.querySelector(".quanxuan");
quanxuan.onclick =function () {
	var danxuanList = document.querySelectorAll(".danxuan");
	for (let index = 0; index<danxuanList.length; index++) {
		danxuanList[index].checked = quanxuan.checked;
	}
}


var  delChecked = document.getElementById("delChecked");
      delChecked.onclick = function() {
	  cartArr = getLocalCartData();
	  var danxuanList = document.querySelectorAll(".danxuan:checked");
	  for (let i =0; i<danxuanList.length;i++) {
		cartArr.forEach(function(item,index) {
			if (item.id === danxuanList[i].getAttribute("data-id")){
				cartArr.splice(index,1)
			}
		})
	}
	localStorage.cartArr = JSON.stringify(cartArr);
	render(getLocalCartData());
}

